<template>
  <div>
    <vue-scroll id="scroll" :ops="ops">
      <div class="flex text-center pt-1 p-1 ">
        <el-button size="small " :type="item.active?'primary':''"
                   v-for="item in tabs"
                   :key="item.path"
                   @contextmenu.prevent.native.stop="e => contextmenu(e,item)"
                   @click="tabSelect(item)">
          <span class="el-icon-refresh" @click.prevent.stop="tabRefresh(item)"></span>
          {{ item.title }}
          <span v-if="item.canDel" class="el-icon-close" @click.prevent.stop="tabClose(item)"></span>
        </el-button>
      </div>
    </vue-scroll>
    <menu-opt :visible.sync="menuOptShow" :position="position" :contextTab="contextTab" @select="onMenuSelect"/>
  </div>
</template>
<script>
import MenuOpt from '@/components/TabView/MenuOpt'
import {getValue, setValue} from '@/utils/sessionStorage'

export default {
  name: "TabView",
  components: {MenuOpt},
  data() {
    return {
      active: false,
      tabs: [
        // {
        //   title: "首页",
        //   name: "Index",
        //   path: "/index",
        //   active: true,
        //   canDel: false,
        //   width: "80px"
        // }
      ],
      contextTab: {},
      menuOptShow: false,
      position: {
        left: 0,
        top: 0
      },
      ops: {
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: true,
          keepShow: false,
          background: '#c1c1c1',
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: '6px',
          disable: false,
        }
      }
    }
  },
  created() {
    let visitViews = JSON.parse(getValue("visitViews"));
    if (visitViews && visitViews.length > 0) {
      this.tabs = visitViews;
      this.$store.dispatch('tagsView/addVisitViewAll', visitViews)
    } else {
      const route = this.$route
      if (route.path.indexOf("redirect") > -1) {
        return
      }
      if (route.path !== "/index" && route.path !== "") {
        let item = {
          name: route.name,
          title: route.meta.title,
          path: route.path,
          active: false,
          canDel: true,
          width: this.getWidth(route.meta.title)
        }
        this.tabs.push(item)
        this.setActive(item);
      }
    }
  },
  watch: {
    $route() {
      this.routeChange()
    },
  },

  methods: {
    getWidth(str) {
      if (str.length <= 2) {
        return "70px"
      }
      return (str.length * 25) + "px"
    },
    routeChange() {
      const route = this.$route
      if (route) {
        if (route.path.indexOf("redirect") > -1) {
          return
        }
        if (getValue("visitViews")) {
          this.tabs = JSON.parse(getValue("visitViews"));
        }
        let index = this.tabs.findIndex(it => it.path === route.fullPath)
        if (index === -1) {
          let item = {
            name: route.name,
            title: route.meta.title,
            path: route.fullPath,
            active: false,
            canDel: true,
            width: this.getWidth(route.meta.title)
          }
          this.tabs.push(item)
          this.setActive(item);
          this.$store.dispatch('tagsView/addVisitView', item)
        } else {
          this.setActive(this.tabs[index]);
          this.$store.dispatch('tagsView/addVisitView', this.tabs[index])
        }
        setValue("visitViews", JSON.stringify(this.tabs));
      }
    },
    setActive(item) {
      item.active = true;
      this.tabs = this.tabs.map((it) => {
        if (item.path !== it.path) {
          it.active = false;
        }
        return it;
      })
    },
    tabSelect(item) {
      if(item.active){
        return;
      }
      item.active = true;
      this.tabs = this.tabs.map((it) => {
        if (item.path !== it.path) {
          it.active = false;
        }
        return it;
      })
      this.$router.push(item.path);
    },
    tabClose(item) {
      const index = this.tabs.indexOf(item);
      this.tabs.splice(index, 1);
      if (item.active) {
        let pItem = this.tabs[index - 1];
        this.tabSelect(pItem)
      }
      setValue("visitViews", JSON.stringify(this.tabs));
      this.$store.dispatch('tagsView/delVisitView', item)
    },
    contextmenu(e, item) {
      this.position.left = e.clientX
      this.position.top = e.clientY
      this.menuOptShow = true;
      this.contextTab = item;
    },
    onMenuSelect(key, item) {
      switch (key) {
        case '1':
          this.closeLeft(item);
          break
        case '2':
          this.closeRight(item);
          break
        case '3':
          this.closeOthers(item);
          break
        case '4':
          this.closeAll(item);
          break
        default:
          break
      }
      setValue("visitViews", JSON.stringify(this.tabs));
    },
    tabRefresh(item) {
      this.$store.dispatch('tagsView/delVisitView', item).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: "/redirect" + item.path
          })
        })
      })

    },
    closeLeft(item) {
      let idx = this.tabs.indexOf(item);
      if (idx > 1) {
        this.tabs.splice(1, idx - 1)
        this.$store.dispatch('tagsView/addVisitViewAll', this.tabs)
      }
      let active = this.tabs.some(it => {
        return it.active === true
      })
      if (!active) {
        item.active = true
        this.$router.push(item.path);
      }
    },
    closeRight(item) {
      let idx = this.tabs.indexOf(item);
      if (idx > 0) {
        this.tabs.splice(idx + 1, this.tabs.length - idx - 1)
        this.$store.dispatch('tagsView/addVisitViewAll', this.tabs)
      }
      let active = this.tabs.some(it => {
        return it.active === true
      })
      if (!active) {
        item.active = true
        this.$router.push(item.path);
      }
    },
    closeOthers(item) {
      let index = this.tabs[0];
      if (!item.active) {
        item.active = true;
        this.$router.push(item.path);
      }
      this.tabs = [index, item];
      this.$store.dispatch('tagsView/addVisitViewAll', this.tabs)
    },
    closeAll() {
      let index = this.tabs[0];
      index.active = true;
      this.tabs = [index];
      this.$router.push(index.path);
      this.$store.dispatch('tagsView/addVisitViewAll', this.tabs)
    },
  },
  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 5) {
        return value.slice(0, 6) + '...'
      }
      return value
    },
  }
}
</script>

<style type="scss">
#scroll > div::-webkit-scrollbar {
  display: none;
}

#scroll > div {
  -ms-overflow-style: none;
  scrollbar-color: transparent transparent;
}
</style>
